<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ICamera</title>
  </head>
  <body>
    <video id="video" autoplay="autoplay"></video>
  </body>
  <script>
    // 获得video摄像头区域
    var video = document.getElementById("video");
    var videoStream = null;
    var stop = true;
    var recorder = null;
    var allChunks = [];
    // 页面加载完成自动执行
    window.onload = () => {
      // 获取摄像头视频
      this.getMedia();
    };
    // 双击停止录制并且保存文件、关闭摄像头
    video.ondblclick = () => {
      window.dialogAPI.quitRecord("停止录制并保存录像");
      this.stopRecord(); // 停止录制
      setTimeout(() => {
        window.opener.postMessage("close-vedio-window"); // 关闭窗口
      }, 1000);
    };
    // 右键是暂停或者继续录制
    video.oncontextmenu = () => {
      if (stop) {
        window.dialogAPI.resumeRecord("继续录制");
        this.reStartMedia();
        this.resumeRecord(); //继续录制
      } else {
        window.dialogAPI.pauseRecord("暂停录制");
        this.fakeStopMedia(); // 暂停录制
        this.pauseRecord(); // 暂停录制
      }
    };

    // 重新播放
    function reStartMedia() {
      video.play();
      this.stop = false;
    }

    // 假暂停-后台继续还有视频流
    function fakeStopMedia() {
      video.pause();
      this.stop = true;
    }
    // 结束获取视频流数据
    function stopMedia() {
      this.videoStream.getTracks()[0].stop();
      this.videoStream.getTracks()[1].stop();
    }
    // 获得视频流数据
    function getMedia() {
      var constraints = {
        video: { width: 160, height: 160 },
        audio: true,
      };
      //   H5新媒体接口 navigator.mediaDevices.getUserMedia()
      var promise = navigator.mediaDevices.getUserMedia(constraints);
      promise
        .then(function (MediaStream) {
          video.srcObject = MediaStream;
          video.play();
          // 创建录制器并且开始录制
          this.createRecorderAndStartRecord(MediaStream);
          this.videoStream = MediaStream;
          this.stop = false;
        })
        .catch(function (PermissionDeniedError) {
          console.log(PermissionDeniedError);
        });
    }

    // 开始录像
    function createRecorderAndStartRecord(stream) {
      // 录制格式测试
      // const types = [
      //   "video/webm",
      //   "video/mp4",
      //   "audio/webm",
      //   "video/webm;codecs=vp8",
      //   "video/webm;codecs=daala",
      //   "video/webm;codecs=h264",
      //   "audio/webm;codecs=opus",
      //   "video/mpeg",
      // ];
      // for (const type of types) {
      //   console.log(
      //     `Is ${type} supported? ${
      //       MediaRecorder.isTypeSupported(type) ? "Maybe!" : "Nope :("
      //     }`
      //   );
      // }
      recorder = new MediaRecorder(stream);
      recorder.start();
      recorder.ondataavailable = (event) => {
        let blob = new Blob([event.data], {
          type: "video/webm",
        });
        // 通过预加载脚本和主线程去保存
        window.dialogAPI.saveMovie(blob);
      };
    }

    // 结束录制
    function stopRecord() {
      recorder.stop();
    }

    // 暂停录制
    function pauseRecord() {
      recorder.pause();
    }

    // 继续录制
    function resumeRecord() {
      recorder.resume();
    }
  </script>
</html>

<style>
  #video {
    /* 自适应大小 */
    height: 100%;
    width: 100%;
    display: block;
    /* 设置圆形 */
    border-radius: 50%;
    border-top-left-radius: 5%;
    /* border-top-right-radius: 5%; */

    /* 镜像反转 */
    transform: rotateY(180deg);
    /* 可拖拽 */
    -webkit-app-region: drag;
  }
</style>
